<template>
  <!-- 文本框 -->
    <el-input
    v-if="itemObj.type === 'text'"
    v-model="queryObj[`${itemObj.queryName}`]"
    :placeholder="itemObj.placeholder"
    :style="{ width: itemObj.inputWidth }"
    :size="itemObj.size"
    clearable
    @keyup.enter.native="emit('pushFilterEnd')"
  />
  
  <!-- 区间 -->
  <div v-if="itemObj.type === 'section'">
    <el-input
      v-model="queryObj[`${itemObj.queryNames[0]}`]"
      :placeholder="itemObj.placeholders[0]"
      :style="{ width: itemObj.inputWidth }"
      :size="itemObj.size"
      clearable
   
      @keyup.enter.native="emit('pushFilterEnd')"
    />
    <span class="text-gray-500" style="padding: 0 5px">-</span>
    <el-input
      v-model="queryObj[`${itemObj.queryNames[1]}`]"
      :placeholder="itemObj.placeholders[1]"
      :style="{ width: itemObj.inputWidth }"
      :size="itemObj.size"
      clearable

      @keyup.enter.native="emit('pushFilterEnd')"
    />
  </div>

  <!-- 级联选择器 -->
  <el-cascader
    v-model="queryObj[`${itemObj.queryName}`]"
    v-if="itemObj.type === 'cascader'"
    :options="itemObj.listData"
    :props="itemObj.inputProps"
    :show-all-levels="true"
    :popper-class="itemObj.inputProps.checkStrictly ? '' : 'last-check'"
    collapse-tags
    collapse-tags-tooltip
    clearable

    :placeholder="itemObj.placeholder"
    :style="{ width: itemObj.inputWidth }"
    @change="cascaderDataChangeHandler"
  />
  <!-- 下拉选择 -->
  <el-select
    v-if="itemObj.type === 'select'"
    v-model="queryObj[`${itemObj.queryName}`]"
    :placeholder="itemObj.placeholder"
    clearable
    :multiple="itemObj.multiple"
    collapse-tags
    :style="{ width: itemObj.inputWidth }"
  >
    <el-option
      v-for="item in itemObj.listData"
      :label="item.label"
      :value="item.val"
    />
  </el-select>
  <!-- 多选框组 -->
  <el-checkbox-group
    v-if="itemObj.type === 'checkboxGroup'"
    v-model="queryObj[`${itemObj.queryName}`]"
    @change="groupDataChangeHandler"
  >
    <el-checkbox-button
      v-for="obj in itemObj.listData"
      :key="obj"
      :label="obj.val"
      >{{ obj.label }}
    </el-checkbox-button>
  </el-checkbox-group>
  <!-- 多选框 单选 -->
  <el-checkbox
    v-model="queryObj[`${itemObj.queryName}`]"

    v-if="itemObj.type === 'checkboxItem'"
    :label="itemObj.placeholder"
    :true-label="itemObj.trueLabel"
    :false-label="itemObj.falseLabel"
  />
  <!-- 单选 -->
  <el-radio-group
    v-if="itemObj.type === 'radioGroup'"
    v-model="queryObj[`${itemObj.queryName}`]"
  >
    <el-radio label="1">Option 1</el-radio>
    <el-radio label="2">Option 2</el-radio>
  </el-radio-group>
</template>
<script setup lang="ts">
const emit = defineEmits(["change", "pushFilterEnd"]);
const props = defineProps({
  itemObj: {
    type: Object,
    default: () => ({}),
  },
  queryObj: {
    type: Object,
    default: () => ({}),
  },
});
// 级联选择器禁用选择
const cascaderDataChangeHandler = (val: any) => {
  // 二级数组转一级
  if (props.itemObj.maxNumber && props.itemObj.maxNumber !== "-") {
    const newList = val.flat(Infinity);
    setDisabled(
      props.itemObj.listData,
      newList,
      val.length >= Number(props.itemObj.maxNumber)
    );
  }
};
// 超过指定个数后禁止选择
const setDisabled = (options: any, checkedList: any, fullFlag: boolean) => {
  return options.map((item: any) => {
    item.disabled = true;
    if (checkedList.indexOf(item.value) > -1 || !fullFlag) {
      item.disabled = false;
    }
    if (item.children && item.children.length > 0) {
      setDisabled(item.children, checkedList, fullFlag);
    }
  });
};

// 多选款默认数据
const groupDataChangeHandler = (val: any) => {
  const _val = JSON.parse(JSON.stringify(val));
  // 没有数据时就默认为默认数据
  if (
    _val.length === 0 &&
    props.itemObj.defaultValue &&
    props.itemObj.defaultValue.length > 0
  ) {
    props.queryObj[`${props.itemObj.queryName}`] = props.itemObj.defaultValue;
  }
  // 有没有一起的数据,最后一个是该数据时就显示当前的数据
  if (
    props.itemObj.notTogetherValue &&
    props.itemObj.notTogetherValue.length > 0 &&
    _val.length > 1
  ) {
    if (_val[_val.length - 1] === props.itemObj.notTogetherValue[0]) {
      props.queryObj[`${props.itemObj.queryName}`] =
        props.itemObj.notTogetherValue;
    }
    if (
      _val.indexOf(props.itemObj.notTogetherValue[0]) > -1 &&
      _val.indexOf(props.itemObj.notTogetherValue[0]) < _val.length - 1
    ) {
      props.queryObj[`${props.itemObj.queryName}`] = [];
      _val.forEach((item: number | string) => {
        if (item !== props.itemObj.notTogetherValue[0]) {
          props.queryObj[`${props.itemObj.queryName}`].push(item);
        }
      });
    }
  }
};
</script>
